<template>
	<view class="gz-index-box">
		<view class="gz-list-item" v-for="(item,index) in userList" :key="index">
			<view class="gz-list-item-left">
				<image v-if="item.img && type != 'dz'" :src="item.img" mode="" class="user-img" @click="gotoUser(item.fans_id)"></image>
				<image v-if="item.user_img && type == 'dz'" :src="item.user_img" mode="" class="user-img" @click="gotoUser(item.user_id)"></image>
				<image v-if="!item.img && type != 'dz'" src="../../static/my_icon_head@2x.png" mode="" class="user-img" @click="gotoUser(item.fans_id)"></image>
				<image v-if="!item.user_img && type == 'dz'" src="../../static/my_icon_head@2x.png" mode="" class="user-img" @click="gotoUser(item.user_id)"></image>
				<view class="item-user-news">
					<view class="item-user-news-name">{{item.nickname}}</view>
					<view class="item-user-news-time">
						<text v-if="type == 'gz'">关注了</text>
						<text v-if="type == 'dz'">点赞了你的作品</text>
						<text v-if="type == 'fs'">关注了你</text>
						{{item.like_date ? item.like_date : item.follow_date}}
					</view>
				</view>
			</view>
			<view class="gz-list-item-right">
				<view class="gz-btn" v-if="item.is_mutual == 0 && type == 'fs'" @click="guanzhuFun(item.fans_id)">
					回关
				</view>
				<view class="gz-btn-none" v-if="item.is_mutual == 0 && type == 'gz'" @click="quxiaoGzFun(item.follow_id)">
					取消关注
				</view>
				<view class="gz-btn-none" v-if="item.is_mutual == 1 && type != 'dz'" @click="quxiaoGzFun(item.fans_id)">
					互相关注
				</view>
				<image v-if="type == 'dz'" :src="item.image" mode="" class="zuopingImg" @click="gotoWorkDetails(item.work_id)"></image>
			</view>
		</view>
		<view class="none-user-text" v-if="userList.length == 0">
			~暂无信息~
		</view>
	</view>
</template>

<script>
	import http from '../../api/api-index.js'
	
	export default{
		data(){
			return{
				userList:[],
				user_id:'',
				page:1,
				type:'gz',//gz(关注),dz(点赞),fs(粉丝)
			}
		},
		onLoad(options){
			console.log(options)
			this.type = options.name 
			this.user_id = uni.getStorageSync('uid')
			this.getInit()
		},
		onReachBottom(){
			this.page++
			this.getInit()
		},
		methods:{
			getInit(){
				if(this.type == 'gz'){
					this.getUserFollowsFun()
					uni.setNavigationBarTitle({
						title: '我的关注'
					});
				}else if(this.type == 'fs'){
					this.getUserFansFun()
					uni.setNavigationBarTitle({
						title: '我的粉丝'
					});
				}else if(this.type == 'dz'){
					this.getUserLikesFun()
					uni.setNavigationBarTitle({
						title: '我的获赞'
					});
				}
			},
			getUserFollowsFun(){
				uni.showLoading()
				http.getUserFollows({
					user_id:this.user_id,
					page:this.page,
					limit:10
				}).then((res)=>{
					uni.hideLoading()
					if(res.data.code == 200){
						this.userList = res.data.result
					}
				})
			},
			getUserFansFun(){
				uni.showLoading()
				http.getUserFans({
					user_id:this.user_id,
					page:this.page,
					limit:10
				}).then((res)=>{
					uni.hideLoading()
					if(res.data.code == 200){
						this.userList = res.data.result
					}
				})
			},
			getUserLikesFun(){
				uni.showLoading()
				http.getUserLikes({
					user_id:this.user_id,
					page:this.page,
					limit:10
				}).then((res)=>{
					uni.hideLoading()
					if(res.data.code == 200){
						this.userList = res.data.result
					}
				})
			},
			guanzhuFun(fans_id){
				http.getUserFollow({
					user_id:this.user_id,
					follow_id:fans_id
				}).then((res)=>{
					if(res.data.code == 200){
						uni.showToast({
							title:'关注成功',
							icon:'none'
						})
						this.getInit()
					}
				})
			},
			quxiaoGzFun(fans_id){
				http.getUserFollowF({
					user_id:this.user_id,
					follow_id:fans_id
				}).then((res)=>{
					if(res.data.code == 200){
						uni.showToast({
							title:'取消关注',
							icon:'none'
						})
						this.getInit()
					}
				})
			},
			gotoUser(user_id){
				uni.navigateTo({
					url:'/pages/work/user?id='+user_id
				})
			},
			gotoWorkDetails(work_id){
				uni.navigateTo({
					url:"/pages/work/workDetails?wid="+work_id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.gz-index-box{
		width: 100%;
		min-height:100vh;
		background-color:$bg-color;
		box-sizing: border-box;
		padding: 11px;
		.gz-list-item{
			width: 100%;
			background-color: #fff;
			border-radius: 10px;
			box-sizing: border-box;
			padding: 15px;
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.gz-list-item-left{
				width: calc(100% - 80px);
				display: flex;
				flex-direction: row;
				.user-img{
					width: 50px;
					height: 50px;
					border-radius: 10px;
					margin-right: 10px;
				}
				.item-user-news{
					.item-user-news-name{
						font-size: 18px;
						margin-bottom: 10px;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
					}
					.item-user-news-time{
						font-size: 14px;
						color: #999;
						text{
							margin-right: 5px;
						}
					}
				}
			}
			.gz-list-item-right{
				.gz-btn{
					width: 73px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					color: $main-color;
					border: 1px solid $main-color;
					border-radius: 5px;
					font-size: 14px;
				}
				.gz-btn-none{
					width: 73px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					color: #333;
					border: 1px solid rgb(244,244,244);
					background-color: rgb(244,244,244);
					border-radius: 5px;
					font-size: 14px;
				}
				.zuopingImg{
					width: 50px;
					height: 50px;
					border-radius: 5px;
				}
			}
		}
		.none-user-text{
			width: 100%;
			text-align: center;
			line-height: 50px;
			font-size: 14px;
			color: #999;
		}
	}
</style>